<!-- 广场 -->
<template>
  <view class="bg-home">
    <!--干货列表-->
    <z-paging-list ref="list" v-model="state.list" empty-text="暂无课程" :safe-area-inset-bottom="false" @loadData="loadData">
      <template #top>
        <!--导航栏-->
        <view class="tab-wrap">

          <view class="px-4 py-2">
            <u-search class="flex-1" shape="square" disabled :show-action="false" height="72" bg-color="#f6f6f6"
              :input-style="searchInputStyle" placeholder-color="#999" placeholder="搜索课程"
              @click="navigate('/package_society/pages/search/index?type=course', true)" />
          </view>
          <u-tabs v-model="state.tabIndex" :list="state.tabList" name="category_name" bg-color="none" bar-height="6"
            bar-width="44" active-color="#333" inactive-color="#999" font-size="32" :is-scorll="false"
            :bar-style="{ backgroundColor: '#F4AF22' }" @change="refresh" />
        </view>
      </template>
      <!--线上课程-->
      <view class="mx-4 pt-4 grid grid-cols-2 gap-3">
        <course-item v-for="(item, index) in state.list" :key="index" :data="item" />
      </view>
    </z-paging-list>
  </view>
</template>
<script setup>
import { navigate } from "@/common/util/uni";
import { getOnlineCourseCategoryList, getOnlineCourseList } from '@/common/http/module/square'

const list = ref()
const state = reactive({
  tabIndex: 0,
  tabList: [],
  list: [],
})

function loadCategory() {
  getOnlineCourseCategoryList().then(res => {
    state.tabList = res.data
    refresh()
  })
}

function loadData(page) {
  if (state.tabList.length == 0) return

  const category_id = state.tabList[state.tabIndex].id
  const params = { category_id, page }
  getOnlineCourseList(params).then(res => {
    list.value.onLoadResult(res.data.data || [])
  }).catch(() => {
    list.value.onLoadResult([])
  })
}

function refresh() {
  list.value.onRefresh()
}

onLoad(() => loadCategory())
</script>

<style lang="scss" scoped>
.bg-home {
  height: 100vh;
  background-color: #f6f6f6;
}

.tab-wrap {
  /* height: 85rpx; */
  background-color: #fff;
  border-bottom: 2rpx solid #EEEEEE;
}
</style>
